/*
 <input type="text" ng-model="abc" cleanable-input x="-3" y="-5"/>
 */

angular.module('web').directive('cleanableInput', [
  '$timeout',
  function($timeout) {
    return {
      restrict: 'EA',
      require: 'ngModel',

      scope: {
        model: '=ngModel',
        ngChange: '&',
        x: '=',
        y: '='
      },
      link: function link(scope, element) {
        var id = 'cleanable_inp-' + (Math.random() + '').substring(2);

        element.wrap(
            '<div id="' + id + '" style="position:relative;width:100%;"></div>'
        );
        var btn = $(
            '<a href="" style="font-size:14px;color:#999">' +
            '<i class="glyphicon glyphicon-remove-circle"></i></a>'
        ).appendTo($('#' + id));

        btn
            .css({
              display: 'none',
              position: 'absolute',
              'z-index': 10
            })
            .click(function(e) {
              scope.model = '';

              if (!scope.$root.$$phase) {
                scope.$apply();
              }

              if (scope.ngChange) {
                scope.$eval(scope.ngChange);
              }

              return false;
            });

        var y = isNaN(scope.y) ? 0 : parseInt(scope.y);
        var x = isNaN(scope.x) ? 0 : parseInt(scope.x);

        function onchange(v) {
          if (v && v !== '') {
            btn
                .css({
                  top: 6 + y,
                  right: 6 - x
                })
                .show();
          } else {
            btn.hide();
          }
        }

        // Listen for any changes to the original model.
        var tid;

        scope.$watch(
            'model',
            function alteredValues(newValue, oldValue) {
              $timeout.cancel(tid);
              tid = $timeout(function() {
                onchange(newValue);
              }, 300);
            },
            true
        );
      }
    };
  }
]);
